<template>
	<div class="order-status">
		<div class="option-item">
			<el-button type="text" class="btn-link" @click="orderDetails(orderRow.id)"
				>订单详情</el-button
			>
		</div>
		<div class="option-item" v-show="orderRow.is_discount_btn === 1">
			<el-button type="text" class="btn-link" @click="orderDiscountDetails(orderRow.id)"
			>优惠详情</el-button
			>
		</div>
		<div>
			{{ getStatusText(orderRow.status) }}
		</div>
		<div>
			<el-popover
				v-if="orderRow.seller_remark"
				placement="top-start"
				title="卖家备注"
				width="200"
				trigger="hover"
				:content="orderRow.seller_remark"
			>
				<template #reference>
					<i class="el-icon-s-flag on"></i>
				</template>
			</el-popover>
			<i v-else class="el-icon-s-flag"></i>
			&nbsp;
			<el-popover
				v-if="orderRow.pay_logs && orderRow.pay_logs.length > 0"
				placement="top-start"
				title="付款信息"
				width="400"
				trigger="hover"
			>
				<template #reference>
					<i class="el-icon-s-claim on"></i>
				</template>
				<pay-log-table :logTable="orderRow.pay_logs" />
			</el-popover>
			<i v-else class="el-icon-s-claim"></i>
		</div>
	</div>
	<el-dialog
		:title="orderRow.order_no + ' 订单详情'"
		v-model="dialogVisible"
		:append-to-body="true"
		:close-on-click-modal="false"
		top="0"
		width="80%"
	>
		<template #default>
			<order-details ref="orderDetails" />
		</template>
	</el-dialog>
	<el-dialog
		:title="orderRow.order_no + ' 优惠详情'"
		v-model="dialogDiscountVisible"
		:append-to-body="true"
		:close-on-click-modal="false"
		top="0"
		width="80%"
	>
		<template #default>
			<order-discount-details ref="orderDiscountDetails" />
		</template>
	</el-dialog>
</template>

<script>
import payLogTable from "./payLogTable.vue";
import "./common.scss";
import orderDetails from "./orderDetails.vue";
import orderDiscountDetails from "./orderDiscountDetails.vue";

export default {
	name: "order-status",
	components: {
		payLogTable,
		orderDetails,
		orderDiscountDetails
	},
	props: {
		orderRow: { type: Object, default: () => {} }
	},
	data() {
		return {
			dialogVisible: false,
			dialogDiscountVisible: false
		};
	},
	methods: {
		getStatusText(_status) {
			return this.$TOOL.getStatusText(_status);
		},
		orderDetails(_orderId) {
			console.log(this.dialogVisible);
			this.dialogVisible = true;
			this.$nextTick(() => {
				this.$refs["orderDetails"].initData(_orderId);
			});
		},
		orderDiscountDetails(_orderId) {
			console.log(this.orderRow);
			console.log(_orderId);
			this.dialogDiscountVisible = true;
			this.$nextTick(() => {
				this.$refs["orderDiscountDetails"].initData(_orderId);
			});
		}
	}
};
</script>

<style scoped lang="scss">
.order-status {
	.el-icon-s-flag {
		&.on {
			color: #f00;
			cursor: pointer;
		}
	}
	.el-icon-s-claim {
		&.on {
			color: #f00;
			cursor: pointer;
		}
	}
}
</style>
